Introduktion til kurset
rust-fjerner bl.a. Unit test

Begrebs-kort.
(OneNote til noter).

Walkthrough: Create and run unit tests for managed code
Use code coverage to determine how much code is being tested

Unit Testing (Power point)

Begrebs-kort (Power point)

Har du den nødvendige software:

• Visual Studio Enterprise 2017 or 2019
  Du får licens-nøgle fra Azure Dev Tools (tidligere Microsoft Imagine)
• GitHub Desktop
• ReSharper (du skal have en licens-nøgle)

Læs og afprøv følgende tutorials:
Walkthrough: Create and run unit tests for managed code

Bemærk: For at benytte code covarage i VS2019 med Bank eksemplet , højreklik på 'BankTest" i "Test Explorer" og kør "Analyze Code Covarage for Selected Test"

Gennemgå og diskuter parvist følgende eksempler: 
TryingUnitTesting | Animal farm | Zoo

Extra: Hackerrank.com Programmerings-konkurrencer osv etc

Component + unit test

Microsoft .Net Core Guide:
Build a .NET Standard library with C# and the .NET Core SDK in ...
Test a .NET Standard library with .NET Core in ...

Læs og afprøv følgende tutorials:
Build a .NET Standard library with C# and the .NET Core SDK in ...
Test a .NET Standard library with .NET Core in ...

Calculator Part1 (.Net Standard library)
Calculator Part2 (program/applikation)

HTML5/CSS3
Semantic tags:
<nav>, <section>, <article>, <footer>

Flexible box model
(-webkit)
More CSS3 Features
Rounded corners
Shadows
Gradients
Alpha (transparencies)
Animation with transitions

Visual Studio Code (VSCode)
Links (VSCode):
Download: https://code.visualstudio.com/
Beginner's Guide: https://channel9.msdn.com/Blogs/raw-tech/Beginners-Guide-to-VS-Code

HTML
http://www.w3schools.com/htmL/

CSS(Cascading Style Sheets)
http://www.w3schools.com/css/default.asp
http://www.w3schools.com/css/css3_intro.asp

HTML DOM
http://www.w3schools.com/js/js_htmldom.asp
Linkedin.com/learning:  What is the DOM

Video:
Lynda.com:
http://www.lynda.com/HTML-training-tutorials/224-0.html

Bootstrap
Links (Bootstrap):
Bootstrap: http://getbootstrap.com/
How to add a Navigation bar to your app:
https://www.youtube.com/watch?v=23bpce-5s8I ( Bootstrap 4 Navbar Concepts )

W3Schools Responsive Web Design - The Viewport

Free themes for Bootstrap
Bootstrap CDN: http://www.bootstrapcdn.com/#bootswatch_tab

W3schools: Bootstrap get started
http://www.lynda.com/Bootstrap-training-tutorials/1421-0.html

Google
Test tool: Mobile-friendly Test

Bemærk:
Er HTMLog CSS helt nyt for dig, kunne det være en god ide at gennemgå øvelserne i følgende tutorial fra Codecademy:
https://www.codecademy.com/learn/learn-html-css

Et alternativ eller suplement til Codecademy er W3Schools:
https://www.w3schools.com/

Er du allerede bekendt med HTML/CSS - kan du evt se nærmere på LinkedIn.learning (Lynda.com), her finder du mange interessante tutorials.

Eksempler (Kode vist i klassen):
TestHTML4.zip (VSCode)
TestHTML5.zip (VSCode)
SemanticTag.zip (VSCode)
FlexibleBoxModel.zip (VSCode)
RoundedCorner.zip (VSCode)

HTML5Stuff.zip (HTML5 Media tags)
Geolocation.zip (Geolocation with simple HTML5 and Google Maps API)

Opgave:
MyFirstMovies - HTML/CSS

Opgave: (LinkedIn Learning / Lynda.com)
Bootstrap 4: Essential Training with Ray Villalobos
Watch the video, redo the demonstrated stuff and do the Challenge.

Eksempler (Kode vist i klassen):
Bootstrap4Test.zip (Bootstrap 4 - VSCode)
BootstrapLynda.zip(VSCode)

Bootstrap fortsat, JavaScript, TypeScript

1. Basic Types
2. Variable Declarations
3. Functions (only the sections Introduction + Functions)
4. Iterations and Generators

Linkedin/learning:
Jess Chadwick TypeScript Essential Training (video)

Exercise:
Bootstrap makeover (af eksisterende side)


Exercise: (Install: Node + npm, Git and TypeScript)
Install Node + npm (download: https://nodejs.org/en/)
Verify that it works by running: node -v (version 12.18.3 pr 14.09.2020)

Install Git (download: https://git-scm.com/)
Verify that it works by running: git --version (version 2.28.0 pr 14.09.2020)

Install the TypeScript compiler globally by issuing:
npm install -g typescript
Verify the compiler works by running
tsc -v (version 4.0.2 pr 14.09.2020)

Install the extension TSLint to Visual Studio Code
TSLint will help you write good (and human readable) TypeScript programs.

Exercise: (Typescript)
Exercise1-TypeScript.html
Exercise2-TypeScript.html


Solutions:
Exercise1-TypeScript.zip
Exercise2-TypeScript.zip

What is Vue: Introduction (video)

Vue Mastery: Intro to Vue.js (video)
Vuejs.org: Vue Introduction

Vue Essentials Cheat Sheet, specially page 1

Exersice: (Vue.js)
Gennemgå Intro to Vue.js og løs diverse Challenge

Eksempler (Kode vist i klassen):
VueIntroduction.zip

Vue.js (fortsat)
Git / GitHub
Node, npm
Webpack 4

GitHub:
Hello World Guide
Understanding the GitHub flow

Webpack 4: https://webpack.js.org/
What is Webpack?
Webpack, a brief introduction to som files ...
What is npm?

Eksempler (Kode vist i klassen):
TypescriptSayHelloVue.zip
TypescriptVueExample.zip
TypescriptEventHandlingVue.zip
Bemærk: for at køre ovenstående eksempler, skal du først køre 'npm install' og 'npm run watch' fra projekt-mappen (jf nedenstående guide)

Når du skal lave TypeScript/VueJS-projekter så følg følgende guideline:

• Open your terminal window (Command prompt) with CMD
• In the command line go into the folder with your TS-projects (or make one)
• Clone (using git) the WebPack template
  In the commandline type:
  git clone https://github.com/andersbor/Webpack-template.git 'name-of-your-project'
• In the command line go into the new folder: 'name-of-your-project'
• Run “npm install” to get the necessary modules.
• Run “ code .” to start Visual Studio Code
• Run “npm run watch” to ask WebPack to monitor and transpile your file.

Exercise: (Typescript)
Collect words
Calculator

Hint: Use Chrome Dev Tools to monitor your application, specially the Console
In Chrome type Ctrl+Shift+J

Upload your web applications to Microsoft Azure. Help!

Solutions:
CollectWords.zip
Calculator.zip

TypeScript: DOM, Pong Game

TypeScript: Consume REST (Axios),
promises

Første obligatoriske opgave

TypeScript

1. Classes
2. Interfaces
3. Namespaces (export + import)

Axios

1. Sebastian Eschweiler Getting Started with Axios
   This is a JavaScript tutorial. We should convert to TypeScript.
2. GitHub Axios documentation
3. Travis Horn Building json2table: Turn JSON into an HTML table
4. Extra: GitHub offers a REST API. Try it. How to display the data?

Eksempler (Kode vist i klassen):
Dom Manipulation (Ekstra - TS uden Vue)
Pong Game (Ekstra - TS uden Vue)
TypeScriptObjectCarousel (Ekstra - TS uden Vue)

Exercise: (Ekstra - TS uden Vue)
Make changes to the Pong Game
Make changes to the Object Carousel

Eksempler (Kode vist i klassen):

1. My First REST (consuming a simple REST service from TypeScript using Axios)
2. General REST consumer
3. REST GET example (Vue Posts)
4. REST GET, DELETE, POST example (Vue Cars) | REST service provider
5. General REST consumer
6. Extra: Generic Table
7. List + detail
8. Calculator REST (REST POST)

Exercise: (TypeScript, Axios)

1. Go through Getting Started with Axios
   This is a JavaScript tutorial. You should convert to TypeScript.
2. Consume the REST services you made in TEK class
   Like the Customer service
3. High score list for Pong-like game (use REST service)
4. Object Carousel, make it work with JSON

Bunden opgave (SemesterOpgave.zip)
Løsning opg1 (FanOutput.zip)

Anders Børjesson Uploading HTML, CSS and JavaScript to Azure using FTP

Bemærk:
For at kunne benytte de nye async/await fra JavaScript version: ES2018 skal tsconfig.json opdateres så "target" property ændres fra "es5" til "es2018".

TypescriptMyFirstRest.zip (Opdateret version med ES2018, async/await)
AxiosDemo.zip (TS-løsning til Exercise 1 - TypeScript, Axios, med async/await)
VueToDoAxios.zip (Vue-løsning til Exercise 1 - Vue,TypeScript, Axios, med async/await ) Nyt!

Eksempler (Kode vist i klassen):
CalculatorSeleniumTest.zip (Selenium WebDriver + MSTest)
CalculatorV2.zip

Bemærk: Før du kører CalculatorSeleniumTest, skal CalculatorV2 unzippes, åbnes i VSCode og installeres (nmp install) og køres (npm run watch)

Løsning til Semesteropgaven (opgave 1)
FanOutput.zip

Exercise: (UI Testing med Selenium + Azure deployment)
Hvis du ikke har prøvet at uploade et HTML projekt til Azure, så prøv Collect Word el Calculator (se evt:  Uploading HTML, CSS and JavaScript to Azure using FTP)

Lav en UI Test af Collect Word / Calculator med Selenium WebDriver og MSTest

Exercise: (Pair-programming)
REST + TypeScript from user stories (pair programming)

Rasberry Pi SenseHat
Getting started with the SenseHat
Sense Hat API Reference
W3School: Python
Python Quick Guide

Extra: Learn more Python3:
Tutorials Point: Python Tutorial
The Python Tutorial
Python Software Foundation
Guru99: Python Tutorial for Beginners

Examples:
Python + Sense HAT examples
Tamagotchi in the emulator (see: Processing.py)

1. Disco and Christmas lights 
2. Show temperature, humidity or pressure on the display using (very) simple graphs or digits.
3. Play with some of the examples from W3Schools Python
4. Simple Python (no Sense HAT): Download interpreter + write code in Notepad
5. Extra: Download PyCharm. Same company as ReSharper = same license

Bemærk, hvis du ønsker at benytte PyCharm sammen med din PI (kan absolut godt anbefales!!) skal du benytte en remote connection, se: https://www.hackster.io/Jolley71717/connect-jetbrains-pycharm-to-raspberry-pi-72be15
Opret en ny mappe på din PI ala HEHO, den kommer til at ligge under: /home/pi/HEHO. Denne sti benyttes til "remote project location"

Mandag d. 9/11 kl. 9.00-13.00++ :
MOCK Eksamen 1 (Prog/Tek)

IoT: begrebet, Raspberry Pi, Putty, Linux
IoT: UDP fra Python

1. Wikipedia: Internet of Things
2. Lopez Research An Introduction to the Internet of Things, 2013
3. Libelium: 50 Sensor Applications for a Smarter World
4. Introduction to Lora
5. Internet of Things (slides)

Exercise:

1. Download and install Putty (Putty.exe)
   Putty will enable you to communicate from your laptop to Raspberry Pi: Use the laptop keyboard + screen with the Pi.
   Use the IP address printed at the bottom of the Raspberry Pi
2. Download and install WinSCP

With WinSCP you can easily move files from Raspberry Pi to your laptop (and vice versa)

3. Sensing the environment 
4. Ball control | solution (joystick) + solution (orientation)
5. Show the Pi’s IP address on the LED display
6. Read data and send UDP broardcast
7. Use the emulator to program Python

Mock exam 2 (Tek/Prog) 17/12 kl. 9.00-13.00
FR demo dag 18/12 kl. 9.15-10.15